<template>
	<view class="page ranking">
		<page-header></page-header>
		<view class="mc-flex-center margin-top40">
			<QS-tabs :tabs="tabs" :current="current" @change="tabChange" width="150" height="100" animationLineWidth="50"
			 fontSize="36" activeColor="#ffffff" defaultColor="#a295ce"></QS-tabs>
		</view>
		<view class="ranking-list" v-if="current==0">
			<view class="ranking-row" v-for="(item,index) in list" :key="item.userId">
				<view class="ranking-col1">
					<image :src="'../../../static/images/'+(item.type==1?'ui_Qbixiaotubiao':'ui_pifuxiaotubiao')+'.png'" mode="widthFix"
					 class="prize-icon"></image>
				</view>
				<view class="ranking-col2">
					<view class="user-name mc-ellipsis">{{item.productName}} <text class="mc-red ml5" v-if="item.num && item.num!=1">×
							{{item.num}}</text></view>
					<view class="mt10 mc-g8">{{item.remark}}</view>
				</view>
				<view class="ranking-col3 mc-blue">{{item.status==1?'已发放':''}}</view>
			</view>
		</view>
		<view class="ranking-list" v-else-if="current==1 || current==2">
			<view class="ranking-row" v-for="(item,index) in list" :key="item.prizeId" @tap="toDrawDetails(item.prizeId)">
				<view class="ranking-col1">
					<image :src="item.prizeUrl" mode="widthFix" class="prize-icon" style="width: 180rpx;"></image>
				</view>
				<view class="ranking-col2">
					<view class="mc-flex-vcenter mc-space-between">
						<view class="user-name mc-ellipsis">{{item.prizeName}} <text class="mc-red ml5" v-if="item.num && item.num!=1">×
								{{item.num||1}}</text></view>
						<view class="mc-blue mc-flex-none">{{item.status==1?'已发放':''}}</view>
					</view>
					<view class="mt10 mc-g8">{{item.remark}}</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" :contentText="contentText" v-if="total" @tap="loadList"></uni-load-more>
		<view class="list-no-data" v-else>
			<image src="../../../static/images/ui_meiyoujiangping.png" mode="widthFix" />
			<text>暂无奖品，{{current==0?'挑战答题可获得兑换劵哦':'参与抽奖有机会赢取奖品哦'}}~</text>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import QSTabs from '@/components/QS-tabs/QS-tabs.vue'
	let gData = {};
	let _self;
	export default {
		components: {
			uniLoadMore,
			QSTabs
		},
		data() {
			return {
				tabs: [{
					name: '兑换'
				}, {
					name: '抽奖'
				}, {
					name: '砍价'
				}],
				current: 0,

				list: [],
				total: 0,
				status: "more",
				contentText: {
					contentdown: "点击加载",
					contentrefresh: "正在加载...",
					contentnomore: ""
				}
			}
		},
		onLoad(options) {
			_self = this;
			this.initList()
		},
		onUnload() {
			gData = {}; /*因为全局变量会保存，再次打开该页面时会造成一些数据错误 */
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initList();
			uni.stopPullDownRefresh()
		},
		// 上拉加载
		onReachBottom() {
			this.loadList();
		},
		methods: {
			tabChange(current) {
				this.current = current;
				this.initList()
			},
			toDrawDetails(prizeId) {
				if (this.current == 1)
					uni.navigateTo({
						url: '/pages/draw/details/details?prizeId=' + prizeId
					})
				else if (this.current == 2)
					uni.navigateTo({
						url: '/pages/bargain/details/details?bargainPartakeId=' + prizeId
					})
			},
			// 初始化列表
			initList() {
				gData.page = 0;
				this.list = [];
				this.status = "more";
				this.loadList();
			},
			// 加载列表
			async loadList() {
				if (this.status == "more") {
					const page = gData.page + 1;
					this.status = "loading";
					const pageSize = 10;
					// uni.showNavigationBarLoading();
					try {
						let data;
						if (this.current == 0)
							data = await this.$api.home.myPrize({
								page: page, // 页数
								rows: pageSize //
							});
						else if (this.current == 1)
							data = await this.$api.draw.getDrawReceiveList({
								page: page, // 页数
								rows: pageSize //
							});
						else if (this.current == 2)
							data = await this.$api.draw.getDrawReceiveList({
								type: 1,
								page: page, // 页数
								rows: pageSize //
							});
						console.log(data)

						const addList = data.list || [];
						this.list = this.list.concat(addList)
						gData.page = page;
						this.total = data.total;
						const noMore = (page * pageSize) >= data.total;
						this.status = noMore ? "noMore" : "more";
						// uni.hideNavigationBarLoading()
					} catch (e) {
						this.status = "more";
						console.log('request fail', e);
					}
				};
			},
			// ---------------------------------------
			// 保存二维码
			setFormId(e) {
				// _self.$api.setFormId(e);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.ranking {
		background-color: #581ae1;
		color: #555555;
		font-size: 24rpx;

		.ranking-list {
			padding: 36rpx;
		}

		.ranking-row {
			position: relative;
			padding: 20rpx;
			display: flex;
			margin-top: 16rpx;
			z-index: 9;
			background-color: white;
			border-radius: 10rpx;

			.ranking-col1 {
				flex: none;
			}

			.ranking-col2 {
				flex: auto;
				margin-left: 20rpx;

				.user-name {
					width: 320rpx;
					font-size: 30rpx;
					margin-top: 10rpx;
				}
			}

			.ranking-col3 {
				flex: none;
			}
		}

		.prize-icon {
			width: 115rpx;
		}
	}

	.list-no-data {
		image {
			display: block;
			width: 260rpx;
			margin: 160rpx auto 60rpx;
		}

		text {
			display: block;
			width: 100%;
			color: white;
			text-align: center;
			font-size: 28rpx;
			opacity: 0.8;
		}
	}
</style>
